<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript">

            $(function() {

                var controlador = $("#controlador").val();

                $("#lnk_agregar").click(function() {
                    $("#divInsert").dialog("open");
                });

                $(document).on("click", ".link_editar", function() {
                    var $div = $("#divUpdate");
                    var id = $(this).closest("tr").attr("id");
                    $.ajax({
                        type: "POST",
                        url: "../controlador/" + controlador + ".php",
                        data: "OPERACION=selectById&id=" + id + "&controlador=" + controlador,
                        dataType: 'json',
                        cache: false,
                        success: function(item) {
                            if (item.hasOwnProperty("ERROR")) {
                                showPopupBoxMessage(item.ERROR);
                            } else {
                                $div.find("#id").val(item.id);
                                $div.find("#codMaeLocal").val(item.codMaeLocal);
                                $div.find("#nombreMaeLocal").val(item.nombreMaeLocal);
                                $div.find("#codEmpresa").val(item.codMaeEmpresa);
                                $div.find("#codCComercial").val(item.codMaeCComercial);
                                $div.find("#descripcion").val(item.descripcion);
                    
                                //--- chequeo o deschequeo segun sea el caso
                                var e = document.getElementById('divUpdate').getElementsByTagName('*');
                                for (var i = 0; i < e.length; i++) {
                                    if (e[i].hasAttribute('id')) {
                                        if (e[i].id === "activo") {
                                            e[i].checked = (item.activo === "t" ? true : false);
                                        }
                                    }
                                }
                                $div.dialog("open");
                            }
                        },
                        error: function(request, status, error) {
                            showPopupBoxMessage(error);
                        }
                    });
                });
            });

            function getNewRow(div) {
                var id = div.find("#id");
                var codMaeLocal = div.find("#codMaeLocal");
                var nombreMaeLocal = div.find("#nombreMaeLocal");
                var empresa = div.find("#codEmpresa");
                var centroComercial = div.find("#codCComercial");
                var descripcion = div.find("#descripcion");                    
                
                return "<tr id='" + id.val() + "'>" +
                        "<td><a href='#' class='link_editar'>" + codMaeLocal.val() + "</a></td>" +
                        "<td>" + nombreMaeLocal.val() + "</td>" +
                        "<td>" + empresa.val() + "</td>" +
                        "<td>" + centroComercial.val() + "</td>" +
                        "<td>" + descripcion.val() + "</td>" +
                        "<td><b>" + (div.find('#activo').is(':checked') ? "<span style='color: rgb(14,51,22)'>SI</span>" : "<span style='color: rgb(184,35,35)'>NO</span>") + "</td>" +
                        "<td><img class='icon-remove' id='icon-remove' src='../recursos/imagenes/remove.png' title='Eliminar el Registro'></td>" +
                        "</tr>";
            }
        </script>
    </head>
    <body>
        <div id='main'>
            <h1>Locales</h1>
            <input type="hidden" id="controlador" name="controlador" value="MaeLocal"/>        

            <div id="divBuscador">
                <ul class="top-bar" data-topbar>
                    <!-- Title -->
                    <ul class="title-area">
                        <li class="name"><h1><a href="#">Filtro y Ordenar por:</a></h1></li>
                    </ul>

                    <!-- Top Bar Section -->
                    <section class="top-bar-section">
                        <!-- Top Bar Left Nav Elements -->
                        <ul class="left">
                            <!-- Search | has-form wrapper -->
                            <li class="has-form">
                                <div class="row collapse">
                                    <select id="selectFiltroOrdenGrilla" name='selectFiltroOrdenGrilla' ></select> 
                                </div>
                            </li>
                        </ul>

                        <!-- Top Bar Right Nav Elements -->
                        <ul class="right">
                            <li class="has-form">
                                <div class="row collapse">
                                    <input type="text" placeholder="Valor"  id="valorFiltroGrilla" name="valorFiltroGrilla" onchange="$('#valorFiltroGrilla').val($('#valorFiltroGrilla').val().replace(/[^\w\s]/gi, ''));">
                                </div>
                            </li>      <!-- Anchor -->
                            <li class="divider"></li>
                            <!-- Button -->
                            <li class="has-form show-for-large-up">
                                <a href="#" class="button botonRealizarBusqueda"><i class="icon-search"></i>Buscar</a>
                            </li>
                        </ul>
                    </section>
                </ul>
            </div>
            <div style="clear: both;"></div> 
            <div id="generalerror"></div>
            <div id="grilla">
                <div id="agregar" class='derecha'>
                    <a id="lnk_agregar"><i class="icon-plus-sign-alt"></i> Agregar</a>
                </div>
                <div style="clear: both;"></div> 
                <div id="resultados" >
                    <table id="MaeLocal" class="grilla">
                        <tr id='cabecera'>
                            <td class="TD_filtrable" value="codMaeLocal">Codigo</td>
                            <td class="TD_filtrable" value="nombreMaeLocal">Nombre</td>
                            <td class="TD_filtrable" value="codMaeEmpresa">Empresa</td>
                            <td class="TD_filtrable" value="codMaeCComercial">Centro Comercial</td>
                            <td class="TD_filtrable" value="descripcion">Descripci&oacute;n</td>
                            <td class="TD_filtrable" value="activo">Activo</td>                         
                            <td>Acciones</td>
                        </tr>
                    </table>
                    <div class="pagination-centered" id="divPaginacion"> 
                        <input type="HIDDEN" id="paginaActual" name="paginaActual" VALUE="0"/> 
                        <input type="HIDDEN" id="totalPaginas" name="totalPaginas" VALUE="0"/> 
                        <input type="HIDDEN" id="registrosPorPagina" name="registrosPorPagina" VALUE="-1"/> 
                        <ul class="pagination"> 
                            <li><img class="paginacion_begin" id="paginacion_begin" src="../recursos/imagenes/begin.png" style="opacity:0.3" disabled="true"></li> 
                            <li><img class="paginacion_prev" id="paginacion_prev" src="../recursos/imagenes/previous.png" style="opacity:0.3" disabled="true"></li> 
                            <li class="unavailable"><a href="">&hellip;</a></li> 
                            <li class="unavailable"><label id="labelPagina">Pagina 1</label></li>
                            <li class="unavailable"><a href="">&hellip;</a></li> 
                            <li><img class="paginacion_next" id="paginacion_next" src="../recursos/imagenes/next.png"></li>
                            <li><img class="paginacion_end" id="paginacion_end" src="../recursos/imagenes/end.png"></li> 
                        </ul> 
                    </div>                    
                </div>  
            </div>
        </div>

        <!-- Agregar un nuevo centro comercial -->
        <div id="divInsert" class="popout" title="Nuevo Local">
            <form id="frmInsert">
                <input type="hidden" id="OPERACION" name="OPERACION" value="insert"/>
                <input type="hidden" name="id"/>
                <table>
                    <tr>
                        <td>Codigo</td>
                        <td><input type="text" name="codMaeLocal" /></td>
                    </tr>
                    <tr>
                        <td>Nombre</td>
                        <td><input type="text" name="nombreMaeLocal" id="inombreMaeLocal" /></td>
                    </tr>    
                    <tr>
                        <td>Empresa</td>
                        <td>
                            <select name="codEmpresa" id="icodEmpresa">
                                <script type="text/javascript">
                                    cargarOpcionesSelectDesdeControlador($("#divInsert").find("#icodEmpresa"), "MaeEmpresa", "selectAllHTMLSelectFormat");
                                </script>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>Centro Comercial</td>
                        <td>
                            <select name="codCComercial" id="icodCComercial">
                                <script type="text/javascript">
                                    cargarOpcionesSelectDesdeControlador($("#divInsert").find("#icodCComercial"), "MaeCComercial", "selectAllHTMLSelectFormat");
                                </script>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>Descripcion</td>
                        <td><input type="text" name="descripcion" id="idescripcion" /></td>
                    </tr>
                    <tr>
                        <td>Activo</td>
                        <td><input type="checkbox" name='activo' checked="checked"/> </td>
                    </tr>                        
                </table>
                <div id="errormessage"></div>
            </form>
        </div>

        <div id="divUpdate" class="popout" title="Editar Local">
            <form id="frmUpdate">
                <input type="HIDDEN" name="OPERACION" VALUE="update"/>
                <input type="HIDDEN" name="id" id="id" />
                <table>
                    <tr>
                        <td>Codigo</td>
                        <td><input id="codMaeLocal" type="text" name="codMaeLocal" /></td>
                    </tr>
                    <tr>
                        <td>Nombre</td>
                        <td><input type="text" name="nombreMaeLocal" id="nombreMaeLocal" /></td>
                    </tr>    
                    <tr>
                        <td>Empresa</td>
                        <td>
                            <select name="codEmpresa" id="codEmpresa">
                                <script type="text/javascript">
                                    cargarOpcionesSelectDesdeControlador($("#divUpdate").find("#codEmpresa"), "MaeEmpresa", "selectAllHTMLSelectFormat");
                                </script>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>Centro Comercial</td>
                        <td>
                            <select name="codCComercial" id="codCComercial">
                                <script type="text/javascript">
                                    cargarOpcionesSelectDesdeControlador($("#divUpdate").find("#codCComercial"), "MaeCComercial", "selectAllHTMLSelectFormat");
                                </script>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>Descripcion</td>
                        <td><input type="text" name="descripcion" id="descripcion" /></td>
                    </tr>
                    <tr>
                        <td>Activo</td>
                        <td><input type="checkbox" name='activo' id="activo" checked="checked"/> </td>
                    </tr>                        
                </table>
                <div id="errormessage"></div>
            </form>
        </div>
    </body>
    <script type="text/javascript">
        cargarOpcionesSelectFiltroDesdeGrilla(
                $("#selectFiltroOrdenGrilla")  //--- Select en el que se cargaran las opciones
                , $("#" + $("#controlador").val()) //--- TABLA desde la cual se tomaran las opciones (cabecera)
                );
        inicializarPaginacionGrilla(
                $("#controlador").val()    //--- Nombre de la DBtable correspondiente a la grilla
                , "divPaginacion"            //--- Div en el que maneja la paginacion
                , ""                         //--- Where Section
                , -1                         //--- Registros por pagina (Cuando es "-1" toma los registros por pagina que se indican en el parametro del sistema)
                );
        cargarDatosGrillaDesdeControlador(
                $("#controlador").val()    //--- idTabla
                , $("#controlador").val()    //--- controlador
                , "selectAllHTMLTableFormat" //--- Operacion
                , ""                         //--- Campos adicionales
                , $("#divPaginacion").find("#paginaActual").val()            //--- Pagina actual
                , $("#divPaginacion").find("#registrosPorPagina").val()      //-- Registros por pagina
                , $("#divBuscador").find("#selectFiltroOrdenGrilla").val()   //-- Campo por el cual se hara el filtro
                , $("#divBuscador").find("#valorFiltroGrilla").val()         //-- Valor con el cual se hara el filtro
                );
    </script>
</html>
